<template>
	<div class="home">
		<Header ref="header"></Header>
		<Search :keywords="keywords" @setName='setname'></Search>
		<div class="hot-search">
			<div class="title">
				热门搜索
			</div>
			<div class="list-box">
				<span class="list-item">金秋乐园小区</span>
				<span class="list-item">金秋乐园小区</span>
				<span class="list-item">金秋乐园小区</span>
				<span class="list-item">金秋乐园小区</span>
			</div>
		</div>
		<p class="keywords">搜索结果：{{keywords}}</p>
		<p class="tips">
			<span class="t1">没有找到自己的小区怎么办？</span>
			<span class="t2">点击自助注册小区分站</span>
		</p>
		<div class="station-list">
			<div class="list-item" v-for="ind in list" :key="ind.site_id">
				<div class="title">{{ind.sitename}}</div>
				<div class="content">{{ind.area_str}}</div>
				<div class="link">{{ind.site_number}}</div>
			</div>
		</div>

	</div>
</template>

<script>
	import Header from "@/components/header.vue"
	import Search from "@/components/home/search.vue"

	export default {
		name: "search",
		components: {
			Header: Header,
			Search: Search


		},
		data() {
			return {
				keywords: '',
				limit: 10,
				page: 1,
				list: []

			}
		},
		watch:{
			"$route.query.keywords":function(){
				this.keywords = this.$route.query.keywords
				this.getList()
			}
		},
		mounted() {
			this.keywords = this.$route.query.keywords
			this.getList()
		},
		methods: {
			getList() {
				let listData = {
					keywords: this.keywords,
					limit: this.limit,
					page: this.page
				}
				this.$api.home.siteSearch(listData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.list = res.data.data
					}

				})
			},
			setname(name){
				this.$refs.header.setName(name)
			}
		}


	}
</script>

<style scoped lang="less">
	.home {
		margin-top: 2.08rem;
		background: #fff;

		.hot-search {
			padding: 1.5rem 1.28rem;
			background: #fff;

			.title {
				font-size: 0.81rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(45, 45, 45, 1);
			}

			.list-box {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: 1rem;

				.list-item {
					font-size: 0.75rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(124, 124, 124, 1);
					background: rgba(247, 247, 247, 1);
					border-radius: 1rem;
					padding: 0.5rem 0.6rem;
					display: inline-block;
					margin-right: 0.5rem;
					margin-bottom: 0.5rem;
				}
			}

		}

		.keywords {
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 139, 61, 1);
			padding: 0 1.34rem;
		}

		.tips {
			padding: 1rem 1.34rem;

			.t1 {
				font-size: 0.78rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(52, 52, 52, 1);
			}

			.t2 {
				font-size: 0.78rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF8B3D;
			}
		}

		.station-list {
			padding: 0.47rem 1.34rem;

			.list-item {
				.title {
					font-size: 0.81rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(30, 30, 30, 1);
				}

				.content {
					font-size: 0.81rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(52, 52, 52, 1);
					line-height: 1.13rem;
					padding: 1.38rem 0 0.34rem 0;
				}

				.link {
					font-size: 0.81rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(52, 52, 52, 1);
					margin-bottom: 2rem;
				}
			}
		}

	}
</style>
